<template>
	<div :class="{ hidden: hidden }" class="pagination-container">
		<el-pagination :background='true' :current-page.sync="currentPage" :page-size.sync="pageSize"
			:layout="layout" :page-sizes="pageSizes" :pager-count="pageCount" :total="total" v-bind="$attrs"
			@size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
	</div>
</template>

<script>
	export default {
		name: 'Pagination',
		props: {
			total: {
				required: true,
				type: Number,
			},
			page: {
				type: Number,
				default: 1,
			},
			limit: {
				type: Number,
				default: 15,
			},
			pageSizes: {
				type: Array,
				default () {
					return [15, 20, 30, 50, 100, 150 ,200];
				},
			},
			layout: {
				type: String,
				default: 'total, sizes, prev, pager, next, jumper',
			},
			autoScroll: {
				type: Boolean,
				default: true,
			},
			hidden: {
				type: Boolean,
				default: false,
			},
			pageCount: {
				type: Number,
				default: 7,
			},
		},
		computed: {
			currentPage: {
				get() {
					return this.page;
				},
				set(val) {
					this.$emit('update:page', val);
				},
			},
			pageSize: {
				get() {
					return this.limit;
				},
				set(val) {
					this.$emit('update:limit', val);
				},
			},
		},
        created(){
            
        },
		methods: {
			handleSizeChange(val) {
				this.$emit('pagination');
			},
			handleCurrentChange(val) {
				this.$emit('pagination', val);
			},
		},
	};
</script>

<style scoped>
	.pagination-container {
		background: #fff;
        padding:12px 0;
        text-align: right;
	}

	.pagination-container.hidden {
		display: none;
	}
</style>